<template>
  <div class="login-box">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="phone">
        <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="!flag"
          @click="submitForm('ruleForm')"
          >登入</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import store from "../store";
import apiManage from "../api";
import Vue from "vue";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        phone: "",
        password: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      flag: true,
    };
  },
  methods: {
    async submitForm(formName) {
      //console.log(666);
      if (!this.flag) return;
      this.flag = false;
      if (!this.ruleForm.phone) {
        Vue.prototype.$alert("账号不能为空", "警告", {
          confirmButtonText: "确定",
          type: "error",
        });
        this.flag = true;

        return;
      }
      if (!this.ruleForm.password) {
        Vue.prototype.$alert("密码不能为空", "警告", {
          confirmButtonText: "确定",
          type: "error",
        });
        this.flag = true;
        return;
      }
      const res = await apiManage.post_login({
        account: this.ruleForm.phone,
        password: this.ruleForm.password,
      });

      console.log(res, "res");
      if (!res?.error) {
        localStorage.setItem("token_info", res);

        this.$router.replace("/");
      } else {
        Vue.prototype.$alert("账号或密码错误", "警告", {
          confirmButtonText: "确定",
          type: "error",
        });
      }
      this.flag = true;

      // login(obj).then((data) => {
      //   //console.log(data);

      //   store.commit('setUserInfo', data.data);
      //   store.commit('setUid', this.form.position);
      //   localStorage.setItem('uid', this.form.position);
      //   localStorage.setItem('srms_project_token', data.data.create_time);

      //   if (this.$route.query.from) {
      //     console.log('this.$route.query.from', this.$route.query.from);
      //     this.$router.replace(this.$route.query.from);
      //   } else {
      //     this.$router.replace('/');
      //   }
      //   this.flag = true;
      //   //window.location.href='';
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less">
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
}
.el-form .demo-ruleForm {
  width: 420px;
  height: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 21px 41px 0 rgb(0 0 0 / 20%);
}
</style>
